<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>New Document</title>
  <meta name="Generator" content="EditPlus"/>
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
<style type="text/css">
	div#PreviewBox{
		position:absolute;
		padding-left:6px;
		display: none;
	}
	div#PreviewBox span{
		width:7px;
		height:13px;
		position:absolute;
		left:0px;
		top:29px;
		background:url(arrow.gif) 0 0 no-repeat;
	}

	div#PreviewBox div.Picture{
		float:left;
		border:1px #666 solid;
		background:#FFF;
	}
	div#PreviewBox div.Picture div{
		border:4px #e8e8e8 solid;
	}

	div#PreviewBox div.Picture div a img{
		margin:19px;
		border:1px #b6b6b6 solid;
		display: block;
	}
	div#PreviewBox div.Picture div a:hover img{
		border:1px #0000CC solid;
	}
</style>
<script src="floatwindow_mootools.js" type="text/javascript"></script>
<script src="../mootools/mootools.83.none.js" type="text/javascript"></script>
</head>
<body>
	<div id="PreviewBox" onmouseout="hideNav(event);">
		<div class="Picture">
			<div>
				<ul>
					<li>Menu1</li>
					<li>Menu2</li>
					<li>Menu3</li>
				</ul>
			</div>
		</div>
	</div>
 <script type="text/javascript">
	 /* <![CDATA[ */
	function log(txt) {
		document.getElementById('log').innerHTML += txt + "<br/>";
	}
	function onStart() {
		log("show nav-->" + this._from.tagName+ ":_show_tag"+ this._show_tag +",:_x:" + this._x + ",_y:" + this._y +",_timeout:"+ this._timeout);
	}
	function onComplete() {
		log("hide nav-->" + this._from.tagName + ":_show_tag"+ this._show_tag);
	}  
	var fw = new FloatWindow('PreviewBox',{onStart:onStart,onComplete:onComplete});
	function showNav(event, layout) {
		fw.reset({layout:layout});
		fw.show(event);
	}
	function hideNav(event){
		fw.hide(event);
	}
	/* ]]>*/
 </script>
 <div style="margin:50px;">
		
	<ul>
	<li class="thumbImage" style="width:150px; height:100px;">mouseover top
		<a id="a1" href="#" >
		<img onmouseover='showNav(event, "top");' onmouseout='hideNav(event);' src="http://pics.taobao.com/bao/album/chl/man/JJ_250-106.jpg" alt="" style="width:80px; height:80px;display:block;border:none;"/>
		</a>
	</li>
	<li class="thumbImage" style="width:150px; height:100px;">mouseover right
		<a id="a2" href="#">
		<img  onmouseover='showNav(event, "right");' onmouseout='hideNav(event);' src="http://pics.taobao.com/bao/album/chl/man/JJ_250-106.jpg" alt="" style="width:80px; height:80px;display:block;border:none;"/>
		</a>
	</li>
	<li class="thumbImage" style="width:150px; height:100px;">mouseover bottom
		<a id="a3" href="#" >
		<img onmouseover='showNav(event, "bottom");' onmouseout='hideNav(event);' src="http://pics.taobao.com/bao/album/chl/man/JJ_250-106.jpg" alt="" style="width:80px; height:80px;display:block;border:none;"/>
		</a>
	</li>
	<li class="thumbImage" style="width:150px; height:100px;">mouseover left
		<a id="a4" href="#">
		<img  onmouseover='showNav(event, "left");' onmouseout='hideNav(event);' src="http://pics.taobao.com/bao/album/chl/man/JJ_250-106.jpg" alt="" style="width:80px; height:80px;display:block;border:none;"/>
		</a>
	</li>		
	</ul>
</div>
<div id="log">
	
</div>
</body>
</html>